import React, {PureComponent} from 'react'
import propTypes from 'prop-types'
import CInput from '../../components/c_input'
import Loading from '../../components/loading'
import DefaultLayout from '../../layouts/default_layout'
import {createForm} from 'rc-form'
import {Icon, List, Button} from 'antd-mobile'
import {debounce, modal, post} from '../../common/js/utils'
import {withRouter} from 'react-router-dom'

const Item = List.Item

let context

function getUserList(keywords) {
  post('/users/getUsers', {
    keywords
  }, loading => {
    context.setState({loading})
  }).then(res => {
    context.setState({
      list: res.data
    })
  })
}

@createForm({
  onValuesChange: debounce((props, changed, all) => {
    const keywords = changed.keywords
    getUserList(keywords)
  }, 500)
})
@withRouter
class AddContact extends PureComponent {

  state = {
    list: [],
    loading: false
  }

  addFriend = (val, key) => {
    post('/users/addFriend', {id: val._id}, loading => { modal.loading(loading) }).then(res => {
      if (res.result === 1) {
        modal.toast(res.mes)
        const list = this.state.list.slice(0)
        list[key].isFriend = true
        this.setState({ list })
      }
    })
  }

  componentWillMount() {
    context = this
    getUserList()
  }

  render() {
    const {className, history} = this.props
    const {list, loading} = this.state
    return (
      <DefaultLayout
        className={className}
        header={
          <div className="friends-add-header">
            <div className="left" onClick={e => history.go(-1)}>
              <Icon type={'left'} />
              <span>联系人</span>
            </div>
            <div className="middle">
              <CInput
                className="c-input"
                form={this.props.form}
                placeholder={'请输入关键字进行搜索'}
                name={'keywords'}
              />
            </div>
          </div>
        }
      >
        {
          loading
            ? <Loading />
            : <List className="add-friends-list">
                {
                  list.map((val, key) => (
                    <Item
                      key={key}
                      style={{
                        minHeight: '65px'
                      }}
                      extra={
                        val.isFriend
                          ? <Button
                            type={'ghost'}
                            size={'small'}
                          >已添加</Button>
                          : <Button
                              onClick={e => this.addFriend(val, key)}
                              type={'primary'}
                              size={'small'}
                            >添加好友</Button>
                      }
                      thumb={
                        <div className={'img'}>
                          <img
                            src={val.avatar}
                            alt="用户头像"/>
                        </div>
                      }
                    >{val.nickname}</Item>
                  ))
                }
              </List>
        }
      </DefaultLayout>
    )
  }
}

AddContact.propsTypes = {
  className: propTypes.string
}

export default AddContact
